<template>
    <div class="hedaer" :style="headerBackgroundStyle">
        <p class="title">{{ title }}</p>
        <p class="crumb">
            <template v-for="(item, index) in crumbsList" :key="index">
                <span :class="{ current: index === crumbsList.length - 1 }">{{ item }}</span>
                <span v-if="index !== crumbsList.length - 1"> / </span>
            </template>
        </p>
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    title: {
        type: String,
        defalut: ''
    },
    crumbs: {
        type: String,
        defalut: ''
    },
    backgroundImageUrl: {
        type: String,
        default: '' // 可以设置一个默认值，或者留空
    }
})

// 创建一个计算属性来生成背景图片的样式对象
const headerBackgroundStyle = computed(() => {
    if (props.backgroundImageUrl) {
        return {
            backgroundImage: `url('${props.backgroundImageUrl}')`
        };
    }
    return {};
})

const crumbsList = computed(() => {
    return props.crumbs ? props.crumbs.split(',') : []
})
</script>

<style lang="less" scoped>
.hedaer {
    width: 100%;
    height: 192px;
    // background-image: url('~/assets/web/consultation-header-bg.png');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 59px;
    box-sizing: border-box;

    .title {
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 31px;
        color: #FFFFFF;
        line-height: 37px;
        font-style: normal;
        text-transform: none;
        margin-bottom: 23px;
    }

    .crumb {
        height: 22px;
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 14px;
        color: #B6BECD;
        line-height: 22px;
        font-style: normal;
        text-transform: none;

        .current {
            color: #7A818E;
        }
    }


}
</style>